<template>
	<!-- 自定义状态栏 -->
	<view>	
		<view class="empty"></view>
		<view class="status_bar">
				<text>{{title}}</text>
				<view class="options">
					<uni-icons color="white" style="margin-right: 15px;" type="search" size="20"></uni-icons>
					<Drop-Down v-slot="scope" :optionItems="options" @handleCommand="handleCommand">
						<uni-icons color="white" type="plusempty" size="20" @click="scope.click"></uni-icons>
					</Drop-Down>
				</view>
		</view>
	</view>
</template>

<script>
	import DropDown from '../DropDown/DropDown.vue'
	export default {
		name: 'StatusBar',
		props: {
			title: String
		},
		components: {DropDown},
		data() {
			return {
				options: [
					{
						icon: 'chatbubble',
						title: '发起群聊',
						command: 1
					},
					{
						icon: 'personadd',
						title: '添加朋友',
						command: 2
					},
					{
						icon: 'scan',
						title: '扫一扫',
						command: 3
					},
					{
						icon: 'wallet',
						title: '收付款',
						command: 4
					}
				]
			}
		},
		methods: {
			handleCommand(command) {
				if (command === 2) {
					// 跳转添加好友页面
					uni.navigateTo({
						url: '/pages/tabbar/book/navpage/addFriend'
					})
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty {
		height: var(--status-bar-height);
		background-color: $status-bar-backgroud-color;
	}
	.status_bar {
		width: 100%;
		height: $status-bar-height;
		background-color: $status-bar-backgroud-color;
		color: white;
		text-align: center;
		line-height: $status-bar-height;
		font-weight: bold;
		/** relative: 不会脱离文档流，任然会占有位置，而absolute会脱离文档流，不再占有位置（会被其他元素覆盖，如果z-index提高会显示出来，但是会覆盖在其他元素之上） */
		position: relative;
		& > .options {
			display: inline-block;
			position: absolute;
			right: 10px;
			height: $status-bar-height;
		}
	}
</style>